<template>
    <div class="card-box">
        <div class="card-title">
            <span>资料信息</span>
        </div>
        <div class="leadingStepList">
            <el-steps :active="step" align-center>
                <el-step :title="item.title" :class="{'active': item.step === step}" v-for="item in stepList" :key="item.step"/>
            </el-steps>
        </div>
        <leading-in-first ref="leadingInFirst" v-if="step===0" @stepNext="stepNext" :clientType="type"></leading-in-first>
        <leading-in-table ref="leadingInTable" v-if="step===1" :tableDataInfo="tableDataInfo" :clientType="type"></leading-in-table>
        <leading-in-thrid ref="leadingInThrid" v-if="step===2" :tableDataInfo="tableDataInfo"></leading-in-thrid>
        <div class="operaList">
            <el-button v-if="step!=0" @click="previous">上一步</el-button>
            <el-button type="primary" @click="next" v-if="step!=2">下一步</el-button>
            <el-button type="primary" @click="finishReset" v-else>完成</el-button>
        </div>
    </div>
</template>

<script>
    import {delLeadInClientLessees,delLeadInErrorInfos} from '@/views/client-manage/api/clientlessee'
    import {delLeadInClientProvider} from '@/views/client-manage/api/clientprovider'
    import leadingInFirst from '@/views/client-manage/components/leading-in-first'
    import leadingInTable from '@/views/client-manage/components/leading-in-table'
    import leadingInThrid from '@/views/client-manage/components/leading-in-thrid'

    export default {
        name: "leading-in",
        components: {
            leadingInFirst,
            leadingInTable,
            leadingInThrid
        },
        data() {
            return {
                fileList: [],
                tableDataInfo:{},
                step:0,//步骤
                type:''
            }
        },
        computed: {
            //步骤条
            stepList() {
                return [
                    { step: 0, title: '第一步' },
                    { step: 1, title: '第二步' },
                    { step: 2, title: '第三步' },
                ]
            }
        },
        watch: {
            //显示到哪一步
            step: function () {
                if (this.step > 3) {
                    this.step = 3;
                } else if (this.step < 0) {
                    this.step = 0;
                }
            }
        },
        mounted() {
            this.type=this.$route.query.clientType;
        },
        beforeDestroy(){
            this.clearErrorData()
        },
        methods: {
            previous() {
                if (this.step === 1) {
                    if (this.type) {
                        console.log(this.tableDataInfo, "in-this.tableDataInfo")
                        if (this.tableDataInfo.clientIds != null && this.tableDataInfo.clientIds != undefined && this.tableDataInfo.clientIds.length != 0) {
                            console.log(this.tableDataInfo.clientIds, "previous")
                            delLeadInClientProvider({clientIds: this.tableDataInfo.clientIds}).then(res => {
                                if (res.data.data) {
                                    console.log(res.data.data, "deleted")
                                }
                            })
                        }
                    }else {
                        console.log(this.tableDataInfo, "in-this.tableDataInfo")
                        if (this.tableDataInfo.clientIds != null && this.tableDataInfo.clientIds != undefined && this.tableDataInfo.clientIds.length != 0) {
                            console.log(this.tableDataInfo.clientIds, "previous")
                            delLeadInClientLessees({clientIds: this.tableDataInfo.clientIds}).then(res => {
                                if (res.data.data) {
                                    console.log(res.data.data, "deleted")
                                }
                            })
                        }
                    }

                    this.clearErrorData()
                }
                this.step=this.step-1
            },
            next(){
                if(this.step===0){
                    this.$refs.leadingInFirst.next()
                }else{
                    this.step=this.step+1
                }
            },
            clearErrorData(){
                if(this.tableDataInfo.leadInErrorInfoIds != null && this.tableDataInfo.leadInErrorInfoIds != undefined && this.tableDataInfo.leadInErrorInfoIds.length!=0){
                    delLeadInErrorInfos({leadInErrorInfoIds:this.tableDataInfo.leadInErrorInfoIds}).then(res=>{
                        if(res.data.data){
                            console.log(res.data.data,"leadInErrorInfoIds")
                        }
                    })
                }
            },
            finishReset(){
                console.log(this.tableDataInfo.leadInErrorInfoIds,"this.tableDataInfo.leadInErrorInfoIds")
                this.clearErrorData()
                if(this.type){
                    this.$router.push("/client-manage/provider-manage")
                }else {
                    this.$router.push("/client-manage/lessee-manage")
                }
            },
            stepNext(val){
                this.tableDataInfo=val
                console.log(this.tableDataInfo,"this.tableDataInfo.val")
                this.step=this.step+1
            },
        }
    }
</script>

<style scoped lang="scss">
    .leadingStepList{
        padding: 30px 0 30px;
    }
    .leadingStepList{   
        /deep/ .el-step{
            &.active{
                .el-step__icon{
                    background-color: #fff;
                    color: #409EFF;
                }
            }
            .el-step__icon{
                width: 50px;
                height: 50px;
                border-color: #409EFF;
                font-size: 18px;
                background: #409EFF;
                color: #fff;
            }
            .el-step__line{
                top: 24px;
                background-color: #f3f3f3;
            }
            .el-step__title{
                font-size: 14px;
            }
        }
        
    }
    .operaList{
        padding: 40px 80px;
        text-align: right;
    }
</style>
